<template>
	<view class="container">
		<!-- 顶部筛选栏 -->
		<view class="filter-bar">
			<view class="view-toggle">
				<view class="toggle-btn" :class="{active: viewMode === 'list'}" @click="switchView('list')">
					<text class="toggle-icon">📋</text>
					<text class="toggle-text">列表</text>
				</view>
				<view class="toggle-btn" :class="{active: viewMode === 'map'}" @click="switchView('map')">
					<text class="toggle-icon">🗺️</text>
					<text class="toggle-text">地图</text>
				</view>
			</view>
			<view class="filter-btn" @click="showFilter">
				<text class="filter-icon">🔍</text>
				<text class="filter-text">筛选</text>
			</view>
		</view>
		<!-- 列表视图 -->
		<view class="list-view" v-if="viewMode === 'list'">
			<view class="order-stats">
				<text class="stats-text">附近共有 {{filteredOrders.length}} 个订单</text>
				<uni-data-select 
					v-model="currentSortValue" 
					:localdata="sortOptions" 
					@change="onSortChange"
					:clear="false"
					class="sort-select">
				</uni-data-select>
			</view>

			<scroll-view class="orders-scroll" scroll-y="true" @scrolltolower="loadMore">
				<view class="order-card" v-for="order in filteredOrders" :key="order.id" @click="goToDetail(order.id)">
					<view class="order-header">
						<view class="pet-info">
							<text class="pet-icon">{{order.petType}}</text>
							<view class="pet-details">
								<text class="pet-name">{{order.petName}}</text>
								<text class="pet-breed">{{order.petBreed}}</text>
							</view>
						</view>
						<view class="order-status">
							<view class="urgent-tag" v-if="order.isUrgent">紧急</view>
							<text class="distance">{{order.distance}}</text>
						</view>
					</view>

					<view class="order-content">
						<text class="order-title">{{order.title}}</text>
						<view class="service-tags">
							<text class="service-tag" v-for="service in order.services" :key="service">{{service}}</text>
						</view>
					</view>

					<view class="order-footer">
						<view class="time-location">
							<text class="time">{{order.serviceTime}}</text>
							<text class="location">{{order.location}}</text>
						</view>
						<view class="price-section">
							<text class="price">¥{{order.price}}</text>
							<text class="price-unit">/{{order.priceUnit}}</text>
						</view>
					</view>

					<view class="order-actions">
						<button class="btn-contact" @click.stop="contactOwner(order.id)">联系主人</button>
						<button class="btn-accept" @click.stop="acceptOrder(order.id)">立即接单</button>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 地图视图 -->
		<view class="map-view" v-if="viewMode === 'map'">
			<map class="map" 
				 :latitude="mapCenter.latitude" 
				 :longitude="mapCenter.longitude"
				 :markers="mapMarkers"
				 @markertap="onMarkerTap">
			</map>
			
			<!-- 地图上的订单卡片 -->
			<view class="map-order-card" v-if="selectedMapOrder">
				<view class="card-header">
					<view class="pet-info">
						<text class="pet-icon">{{selectedMapOrder.petType}}</text>
						<text class="pet-name">{{selectedMapOrder.petName}}</text>
					</view>
					<view class="close-btn" @click="selectedMapOrder = null">×</view>
				</view>
				<text class="order-title">{{selectedMapOrder.title}}</text>
				<view class="order-info">
					<text class="time">{{selectedMapOrder.serviceTime}}</text>
					<text class="price">¥{{selectedMapOrder.price}}</text>
				</view>
				<view class="card-actions">
					<button class="btn-detail" @click="goToDetail(selectedMapOrder.id)">查看详情</button>
					<button class="btn-accept" @click="acceptOrder(selectedMapOrder.id)">接单</button>
				</view>
			</view>
		</view>
		<!-- 筛选弹窗 -->
		<uni-popup ref="filterPopup" type="bottom" background-color="#fff">
			<view class="filter-popup">
				<view class="popup-header">
					<text class="popup-title">筛选条件</text>
					<text class="popup-close" @click="closeFilter">完成</text>
				</view>

				<!-- 快速筛选标签 -->
				<view class="filter-section">
					<text class="filter-title">快速筛选</text>
					<view class="quick-filter-tags">
						<view class="filter-tag" 
							  :class="{active: activeFilters.includes(filter.key)}" 
							  v-for="filter in quickFilters" 
							  :key="filter.key"
							  @click="toggleQuickFilter(filter.key)">
							{{filter.name}}
						</view>
					</view>
				</view>

				<view class="filter-section">
					<text class="filter-title">距离范围</text>
					<view class="distance-options">
						<view class="distance-option" 
							  :class="{selected: filterData.distance === distance}" 
							  v-for="distance in distanceOptions" 
							  :key="distance"
							  @click="selectDistance(distance)">
							{{distance}}
						</view>
					</view>
				</view>

				<view class="filter-section">
					<text class="filter-title">宠物类型</text>
					<view class="pet-type-options">
						<view class="pet-type-option" 
							  :class="{selected: filterData.petTypes.includes(type.value)}" 
							  v-for="type in petTypeOptions" 
							  :key="type.value"
							  @click="togglePetType(type.value)">
							<text class="type-icon">{{type.icon}}</text>
							<text class="type-name">{{type.name}}</text>
						</view>
					</view>
				</view>

				<view class="filter-section">
					<text class="filter-title">报酬范围</text>
					<view class="price-range">
						<input class="price-input" v-model="filterData.minPrice" placeholder="最低" type="number" />
						<text class="price-separator">-</text>
						<input class="price-input" v-model="filterData.maxPrice" placeholder="最高" type="number" />
					</view>
				</view>

				<view class="filter-actions">
					<button class="btn-reset" @click="resetFilter">重置</button>
					<button class="btn-apply" @click="applyFilter">应用筛选</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			viewMode: 'list', // 'list' 或 'map'
			activeFilters: [],
			currentSort: '距离最近',
			currentSortValue: 0, // 当前排序选项的value
			selectedMapOrder: null,
			filterData: {
				distance: '5公里内',
				petTypes: [],
				minPrice: '',
				maxPrice: ''
			},
			mapCenter: {
				latitude: 39.908823,
				longitude: 116.397470
			},
			quickFilters: [
				{key: 'urgent', name: '紧急订单'},
				{key: 'cat', name: '猫咪'},
				{key: 'dog', name: '狗狗'},
				{key: 'high_price', name: '高报酬'},
				{key: 'today', name: '今日服务'},
				{key: 'nearby', name: '附近1公里'}
			],
			distanceOptions: ['1公里内', '3公里内', '5公里内', '10公里内', '不限'],
			petTypeOptions: [
				{value: 'cat', name: '猫咪', icon: '🐱'},
				{value: 'dog', name: '狗狗', icon: '🐕'},
				{value: 'bird', name: '鸟类', icon: '🐦'},
				{value: 'other', name: '其他', icon: '🐾'}
			],
			sortOptions: [
			{value: 0, text: '距离最近'},
			{value: 1, text: '报酬最高'},
			{value: 2, text: '时间最早'},
			{value: 3, text: '最新发布'}
		],
			orders: [
				{
					id: 1,
					petType: '🐱',
					petName: '小咪',
					petBreed: '英短',
					title: '需要喂食和清理猫砂',
					services: ['喂食', '清理'],
					serviceTime: '今天 18:00',
					location: '朝阳区',
					distance: '500m',
					price: 50,
					priceUnit: '次',
					isUrgent: true,
					latitude: 39.918823,
					longitude: 116.407470
				},
				{
					id: 2,
					petType: '🐕',
					petName: '旺财',
					petBreed: '金毛',
					title: '需要遛狗和喂食',
					services: ['遛狗', '喂食'],
					serviceTime: '明天 08:00',
					location: '海淀区',
					distance: '1.2km',
					price: 80,
					priceUnit: '次',
					isUrgent: false,
					latitude: 39.928823,
					longitude: 116.417470
				},
				{
					id: 3,
					petType: '🐱',
					petName: '咪咪',
					petBreed: '布偶',
					title: '长期喂养服务',
					services: ['喂食', '陪玩', '清理'],
					serviceTime: '每天 19:00',
					location: '西城区',
					distance: '2.1km',
					price: 120,
					priceUnit: '天',
					isUrgent: false,
					latitude: 39.898823,
					longitude: 116.387470
				}
			]
		}
	},
	computed: {
		filteredOrders() {
			let filtered = [...this.orders]
			
			// 应用快速筛选
			if (this.activeFilters.includes('urgent')) {
				filtered = filtered.filter(order => order.isUrgent)
			}
			if (this.activeFilters.includes('cat')) {
				filtered = filtered.filter(order => order.petType === '🐱')
			}
			if (this.activeFilters.includes('dog')) {
				filtered = filtered.filter(order => order.petType === '🐕')
			}
			if (this.activeFilters.includes('high_price')) {
				filtered = filtered.filter(order => order.price >= 80)
			}
			
			// 应用排序
			if (this.currentSort === '报酬最高') {
				filtered.sort((a, b) => b.price - a.price)
			} else if (this.currentSort === '距离最近') {
				filtered.sort((a, b) => parseFloat(a.distance) - parseFloat(b.distance))
			}
			
			return filtered
		},
		mapMarkers() {
			return this.filteredOrders.map(order => ({
				id: order.id,
				latitude: order.latitude,
				longitude: order.longitude,
				iconPath: '/static/marker-pet.png',
				width: 30,
				height: 30,
				callout: {
					content: `${order.petName} ¥${order.price}`,
					color: '#333333',
					fontSize: 12,
					borderRadius: 4,
					bgColor: '#F0FFF0',
					padding: 5
				}
			}))
		}
	},
	methods: {
		// 切换视图模式
		switchView(mode) {
			this.viewMode = mode
		},
		// 切换快速筛选
		toggleQuickFilter(key) {
			const index = this.activeFilters.indexOf(key)
			if (index > -1) {
				this.activeFilters.splice(index, 1)
			} else {
				this.activeFilters.push(key)
			}
		},
		// 显示筛选弹窗
		showFilter() {
			this.$refs.filterPopup.open()
		},
		// 关闭筛选弹窗
		closeFilter() {
			this.$refs.filterPopup.close()
		},
		// 排序变更
		onSortChange(value) {
			const sortOption = this.sortOptions.find(option => option.value === value)
			if (sortOption) {
				this.currentSort = sortOption.text
			}
		},
		// 选择距离
		selectDistance(distance) {
			this.filterData.distance = distance
		},
		// 切换宠物类型
		togglePetType(type) {
			const index = this.filterData.petTypes.indexOf(type)
			if (index > -1) {
				this.filterData.petTypes.splice(index, 1)
			} else {
				this.filterData.petTypes.push(type)
			}
		},
		// 重置筛选
		resetFilter() {
			this.filterData = {
				distance: '5公里内',
				petTypes: [],
				minPrice: '',
				maxPrice: ''
			}
		},
		// 应用筛选
		applyFilter() {
			// 这里可以根据filterData进一步筛选订单
			this.closeFilter()
			uni.showToast({title: '筛选已应用', icon: 'success'})
		},
		// 地图标记点击
		onMarkerTap(e) {
			const markerId = e.detail.markerId
			this.selectedMapOrder = this.orders.find(order => order.id === markerId)
		},
		// 跳转到订单详情
		goToDetail(orderId) {
			uni.navigateTo({
				url: `/pages/order-detail/order-detail?id=${orderId}`
			})
		},
		// 联系主人
		contactOwner(orderId) {
			uni.showModal({
				title: '联系主人',
				content: '是否拨打电话联系宠物主人？',
				success: (res) => {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: '13800138000'
						})
					}
				}
			})
		},
		// 接单
		acceptOrder(orderId) {
			uni.showModal({
				title: '确认接单',
				content: '确定要接受这个订单吗？',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({title: '接单中...'})
						setTimeout(() => {
							uni.hideLoading()
							uni.showToast({title: '接单成功', icon: 'success'})
							// 移除已接的订单
							this.orders = this.orders.filter(order => order.id !== orderId)
						}, 1500)
					}
				}
			})
		},
		// 加载更多
		loadMore() {
			// 模拟加载更多数据
			console.log('加载更多订单')
		}
	}
}
</script>

<style scoped>
.container {
	background: linear-gradient(135deg, #F8F9FA 0%, #F0F8FF 100%);
	height: calc(100vh - 100rpx);
	display: flex;
	flex-direction: column;
}

/* 筛选栏 */
.filter-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	background: linear-gradient(135deg, #FFF8DC 0%, #FFF0F5 100%);
	border-bottom: 2rpx solid #F0E6FF;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	border-radius: 0 0 24rpx 24rpx;
}

.view-toggle {
	display: flex;
	background: rgba(240, 255, 240, 0.9);
	border-radius: 24rpx;
	padding: 8rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	border: 1rpx solid rgba(152, 228, 214, 0.3);
}

.toggle-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15rpx 20rpx;
	border-radius: 18rpx;
	min-width: 110rpx;
	transition: all 0.3s ease;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.toggle-btn.active {
	background: #FEFEFE;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	transform: translateY(-3rpx);
}

.toggle-icon {
	font-size: 24rpx;
	margin-bottom: 5rpx;
	color: #666666;
}

.toggle-text {
	font-size: 22rpx;
	color: #666666;
	transition: color 0.3s ease;
}

.toggle-btn.active .toggle-text {
	color: #FFB6C1;
	font-weight: 500;
}

.filter-btn {
	display: flex;
	align-items: center;
	padding: 15rpx 20rpx;
	border: 2rpx solid rgba(152, 228, 214, 0.3);
	border-radius: 24rpx;
	background: rgba(240, 255, 240, 0.9);
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.filter-btn:hover {
	border-color: #FFC0CB;
	transform: translateY(-3rpx);
	box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.2);
	background: rgba(240, 255, 240, 1);
}

.filter-icon {
	font-size: 26rpx;
	margin-right: 10rpx;
	color: #666666;
	filter: drop-shadow(0 1rpx 2rpx rgba(0, 0, 0, 0.1));
}

.filter-text {
	font-size: 24rpx;
	color: #666666;
	font-weight: 500;
}

/* 弹窗中的快速筛选标签 */
.quick-filter-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
	margin-top: 15rpx;
	justify-content: center;
}

.filter-tag {
	padding: 10rpx 30rpx;
	border: 2rpx solid #F0E6FF;
	border-radius: 24rpx;
	font-size: 22rpx;
	color: #666666;
	background: #FEFEFE;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	cursor: pointer;
	font-weight: 500;
}

.filter-tag.active {
	border-color: #FFB6C1;
	background: linear-gradient(135deg, #FFB6C1 0%, #FF91A4 100%);
	color: white;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	transform: translateY(-2rpx);
}

.filter-tag:hover {
	border-color: #FFC0CB;
	transform: translateY(-2rpx);
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

/* 列表视图 */
.list-view {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.order-stats {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	background: #FEFEFE;
	border-bottom: 1rpx solid #F0E6FF;
	border-radius: 24rpx;
	margin: 20rpx 30rpx;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.stats-text {
	font-size: 26rpx;
	color: #666666;
	font-weight: 500;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
}

/* 排序下拉选择器 */
.sort-select {
	width: 220rpx;
}

.orders-scroll {
	flex: 1;
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	background: transparent;
}

/* 订单卡片 */
.order-card {
	background: #FEFEFE;
	border-radius: 30rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	border: 1rpx solid #F0E6FF;
	transition: all 0.3s ease;
	border-left: 6rpx solid #FFC0CB;
}

.order-card:hover {
	transform: translateY(-6rpx);
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
	border-color: #FFC0CB;
	border-left: 6rpx solid #FFB6C1;
}

.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.pet-info {
	display: flex;
	align-items: center;
}

.pet-icon {
	font-size: 36rpx;
	margin-right: 15rpx;
	color: #FFB6C1;
	filter: drop-shadow(0 2rpx 4rpx rgba(255, 182, 193, 0.3));
	transition: transform 0.3s ease;
}

.pet-details {
	display: flex;
	flex-direction: column;
}

.pet-name {
	font-size: 28rpx;
	font-weight: 600;
	color: #333333;
	margin-bottom: 5rpx;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
}

.pet-breed {
	font-size: 22rpx;
	color: #666666;
	font-weight: 400;
	font-style: italic;
}

.order-status {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.urgent-tag {
	background: #FF4444;
	color: white;
	font-size: 20rpx;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	margin-bottom: 8rpx;
	font-weight: 500;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	animation: pulse 2s infinite;
}

.distance {
	font-size: 22rpx;
	color: #666666;
	font-weight: 400;
	background: #F0F8FF;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.order-content {
	margin-bottom: 20rpx;
}

.order-title {
	font-size: 28rpx;
	color: #333333;
	margin-bottom: 15rpx;
	display: block;
	font-weight: 600;
	line-height: 1.4;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
}

.service-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10rpx;
}

.service-tag {
	padding: 8rpx 15rpx;
	background: #F0F8FF;
	border-radius: 18rpx;
	font-size: 22rpx;
	color: #666666;
	border: 1rpx solid #F0E6FF;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	font-weight: 500;
	transition: all 0.3s ease;
}

.order-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.time-location {
	display: flex;
	flex-direction: column;
	gap: 5rpx;
}

.time {
	font-size: 24rpx;
	color: #666666;
	font-weight: 500;
	background: #F0F8FF;
	padding: 6rpx 12rpx;
	border-radius: 12rpx;
}

.location {
	font-size: 24rpx;
	color: #666666;
	font-weight: 400;
	background: #F0F8FF;
	padding: 6rpx 12rpx;
	border-radius: 12rpx;
}

.price-section {
	display: flex;
	align-items: baseline;
}

.price {
	font-weight: bold;
	font-size: 32rpx;
	color: #FF8C42;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

.price-unit {
	font-size: 22rpx;
}

.order-actions {
	display: flex;
	gap: 20rpx;
	margin-top: 20rpx;
	padding-top: 20rpx;
	border-top: 1rpx solid #F0E6FF;
}

.btn-contact {
	flex: 1;
	height: 75rpx;
	border: 2rpx solid #FFB6C1;
	border-radius: 24rpx;
	background: #FEFEFE;
	color: #FFB6C1;
	font-size: 26rpx;
	font-weight: 600;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

.btn-contact:hover {
	background: linear-gradient(135deg, #FFB6C1 0%, #FF91A4 100%);
	color: white;
	transform: translateY(-3rpx);
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
}

.btn-accept {
	flex: 1;
	height: 75rpx;
	border: none;
	border-radius: 24rpx;
	background: linear-gradient(135deg, #FFB6C1 0%, #FF91A4 100%);
	color: white;
	font-size: 26rpx;
	font-weight: 600;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
	transition: all 0.3s ease;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

.btn-accept:hover {
	transform: translateY(-3rpx);
	box-shadow: 0 12rpx 40rpx rgba(255, 182, 193, 0.3);
}

/* 地图视图 */
.map-view {
	flex: 1;
	position: relative;
	border-radius: 30rpx;
	overflow: hidden;
	margin: 20rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
	border: 2rpx solid #F0E6FF;
}

.map {
	width: 100%;
	height: 100%;
}

.map-order-card {
	position: absolute;
	bottom: 30rpx;
	left: 30rpx;
	right: 30rpx;
	background: linear-gradient(135deg, #FEFEFE 0%, rgba(240, 255, 240, 0.98) 100%);
	border-radius: 30rpx;
	padding: 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
	border: 2rpx solid #F0E6FF;
	-webkit-backdrop-filter: blur(10rpx);
	        backdrop-filter: blur(10rpx);
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15rpx;
}

.close-btn {
	width: 45rpx;
	height: 45rpx;
	border-radius: 50%;
	background: #F0F0F0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	color: #666;
	transition: all 0.3s ease;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.order-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.card-actions {
	display: flex;
	gap: 20rpx;
	margin-top: 20rpx;
}

.btn-detail {
	flex: 1;
	height: 75rpx;
	border: 2rpx solid #FF8C42;
	border-radius: 24rpx;
	background: white;
	color: #FF8C42;
	font-size: 26rpx;
	font-weight: 600;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

/* 弹窗样式 */
.filter-popup {
	background: linear-gradient(135deg, #FEFEFE 0%, #FFF8DC 100%);
	border-radius: 30rpx 30rpx 0 0;
	padding: 40rpx 30rpx;
	max-height: 80vh;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
	border: 1rpx solid #F0E6FF;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40rpx;
	padding-bottom: 20rpx;
	border-bottom: 2rpx solid #F0E6FF;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 24rpx;
	padding: 20rpx;
}

.popup-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #333333;
	background: linear-gradient(135deg, #FFB6C1 0%, #FF91A4 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.popup-close {
	font-size: 28rpx;
	color: #FFB6C1;
	padding: 10rpx;
	border-radius: 50%;
	transition: all 0.3s ease;
	background: #F0F8FF;
	width: 50rpx;
	height: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
}

.popup-close:hover {
	background: #FFC0CB;
	transform: rotate(90deg);
	color: white;
}

.filter-section {
	margin-bottom: 40rpx;
	background: rgba(255, 255, 255, 0.7);
	padding: 30rpx;
	border-radius: 24rpx;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.filter-title {
	font-size: 28rpx;
	color: #333333;
	margin-bottom: 20rpx;
	display: block;
	font-weight: 600;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
	border-bottom: 2rpx solid #F0E6FF;
	padding-bottom: 15rpx;
}

.distance-options,
.pet-type-options {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
}

.distance-option,
.pet-type-option {
	padding: 15rpx 30rpx;
	border: 2rpx solid #F0E6FF;
	border-radius: 24rpx;
	font-size: 24rpx;
	color: #666666;
	background: #F0F8FF;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	font-weight: 500;
	min-width: 100rpx;
	text-align: center;
}

.distance-option.selected,
.pet-type-option.selected {
	border-color: #FFB6C1;
	background: linear-gradient(135deg, #FFB6C1 0%, #FF91A4 100%);
	color: white;
	transform: translateY(-3rpx);
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
}

.pet-type-option {
	display: flex;
	align-items: center;
	justify-content: center;
}

.type-icon {
	margin-right: 10rpx;
	color: #FFB6C1;
	font-size: 26rpx;
	filter: drop-shadow(0 1rpx 2rpx rgba(0, 0, 0, 0.1));
}

.price-range {
	display: flex;
	align-items: center;
	gap: 20rpx;
	justify-content: center;
}

.price-input {
	flex: 1;
	height: 75rpx;
	border: 2rpx solid #F0E6FF;
	border-radius: 24rpx;
	padding: 0 20rpx;
	font-size: 26rpx;
	text-align: center;
	background: #F0F8FF;
	color: #333333;
	transition: all 0.3s ease;
	font-weight: 500;
}

.price-input:focus {
	border-color: #FFB6C1;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	background: #FEFEFE;
}

.price-separator {
	font-size: 24rpx;
	color: #666666;
	font-weight: 600;
}

.filter-actions {
	display: flex;
	gap: 20rpx;
	margin-top: 40rpx;
	padding-top: 20rpx;
	border-top: 2rpx solid #F0E6FF;
	justify-content: center;
}

.btn-reset {
	flex: 1;
	height: 85rpx;
	border: 2rpx solid #E6D7FF;
	border-radius: 24rpx;
	background: #FEFEFE;
	color: #666666;
	font-size: 28rpx;
	font-weight: 600;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

.btn-reset:hover {
	border-color: #FFC0CB;
	transform: translateY(-3rpx);
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
}

.btn-apply {
	flex: 1;
	height: 85rpx;
	border: none;
	border-radius: 24rpx;
	background: linear-gradient(135deg, #FFB6C1 0%, #FF91A4 100%);
	color: white;
	font-size: 28rpx;
	font-weight: 700;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
	transition: all 0.3s ease;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

.btn-apply:hover {
	transform: translateY(-3rpx);
	box-shadow: 0 12rpx 40rpx rgba(255, 182, 193, 0.3);
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}
</style>